<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo18</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;   
            /* 取消页面中的所有内外边距，所有内容都没有间距了 */
        }

        .container {
            /* 将整个content进行宽度设置，便于接下来使用margin来调整整个内容的位置，width不能设置太小了，不然内容都没办法展示在一行了*/
            width: 300px;
            /* 通过margin将整体内容调整到居中的位置，设置的方式是上下margin为0px，左右为自适应的px */
            margin: 0 auto 0 auto;
        }

        h1 {
            /* 即使上面将整体的内容居中了，但是标题的位置还是在左边，所以需要文本进行居中 */
            text-align: center;
            /* 因为将文本中默认的margin和padding都设置为0了，所有内容都是紧凑在一起的，此时为了美观，给h1标签的margin或者padding设置下边距 */
            margin-bottom: 40px;
        }

        p {
            /* 例子中的文本颜色是灰色 */
            color: gray;
            /* 文字需要居中 */
            text-align: center;
            /* 通过行高来美化 */
            height: 40px;
        }

        .div1 {
            /* 对每一个div行进行设置行高，美化一下，不会太紧凑 */
            height: 40px;
            /* 使用弹性布局对文字和输入框进行调整 */
            display: flex;
            /* 水平居中 */
            justify-content: center;
            /* 垂直居中 */
            align-items: center;
        }
        
        .input1 {
            /* 美化输入框 */
            width: 200px;
            height: 30px;
        }

        
        span {
            /* 设置提示文字宽度，这样就能够美化 */
            width: 100px;
            /* 增加行高，就能够把每一行的提示词隔开，不太紧凑 */
            line-height: 40px;
        }

        .button1 {
            background-color: rgb(255, 132, 0);
            color: white;
            width: 400px;
            height: 40px;
            border: none;
            border-radius: 5px;
        }

        .button1:active {
            background-color: grey;
        }

        

    </style>
</head>
<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入后点击提交，会将信息显示在表格中</p>
        <div class="div1">
            <span>谁：</span><input type="text" class="input1">
        </div>
        <div class="div1">
            <span>对谁：</span><input type="text" class="input1">
        </div>
        <div class="div1">
            <span>说什么：</span><input type="text" class="input1">
        </div>
        <div class="div1">
            <input type="button" value="提交" class="button1" onclick="submitSuccess()">
        </div>
    </div>
</body>
<script>
    function submitSuccess() {
        let all = document.querySelectorAll('.input1')
        let from = all[0].value;
        let to = all[1].value;
        let message = all[2].value;
        let main = document.querySelector('.container');
        let newnode = document.createElement('message');
        newnode.innerHTML=from + '对' + to + '说' + message;
        newnode.className='div1';
        main.appendChild(newnode);
        //再删除之前文本框中输入的内容
        for (let i = 0; i < 3; i++) {
            all[i].value='';
        }
    }
</script>
</html>